<style>
    .index-map-content {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .index-map-content #i-china-map {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 2001;
    }
    .index-map-content #i-china-shadow {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 2000;
    }
    .index-map-content #i-china-bar {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 2002;
    }
    .index-map-content .c-otherInfo {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background-color: rgba(255,255,255,0.5);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fffffff,endColorstr=#7Fffffff);
        z-index: 1999;
        border-radius: 10px;
    }
    .index-map-content .title {
        padding: 0px 30px;
        height: 50px;
        width: 300px;
        line-height: 50px;
        font-size: 24px;
        color: #fff;
    }
    .index-map-content .legend {
       position: absolute;
       right:20px;
       bottom: 20px;
       height: 100px;
       width: 120px;
    }
    .index-map-content .legendItem {
        height: 20px;
        width: 120px;
    }
    .index-map-content .leftColor {
        display: inline-block;
        width: 20px;
        height: 10px;
    }
    .index-map-content .rightLabel {
        display: inline-block;
        width: 60px;
        height: 20px;
        font-size: 12px;
        color: #fff;
    }
    .index-map-content .c-search {
       position: absolute;
       right:20px;
       top: 20px;
       height: 35px;
       width: 330px;
       z-index: 2010;
       background-color: #fff;
    }
    .index-map-content .serachContent {
        width: 330px;
        height: 100%;
        background-color: #fff;
    }
    .index-map-content .serachInput {
        width: 265px;
        height: 100%;
        line-height: 35px;
        float: left;
        border: none;;
        text-indent: 8px;
    }
    .index-map-content .serachIcon  {
        width: 60px;
        height: 100%;
        text-align: center;
        float: left;
        cursor: pointer;
    }
    .index-map-content .serachIcon i {
        line-height: 37px;
    }
    .index-map-content .listContent {
        position: absolute;
        left: 0px;
        top: 38px;
        width: 100%;
        background-color: #fff;
    }
    .index-map-content .listContent li {
        box-sizing: border-box;
        height: 35px;
        width: 330px;
        text-align: left;
        line-height: 35px;
        padding: 0px 8px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        cursor: pointer;
    }
    .index-map-content .listContent li:hover {
        background-color: #ccc;
    }
    .index-map-content .list-show {
        display: block;
    }
    .index-map-content .list-hide {
        display: none;
    }
    .index-map-content .mask {
        position: fixed;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.7);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
        z-index: 2005;
    }
</style>
<div class="index-map-content">
    <div id="i-china-map"></div>
    <div id="i-china-shadow"></div>
    <div id="i-china-bar"></div>
    <div class="c-otherInfo">
        <div class="title">
            <span>全国数据收集量统计</span>
        </div>
        <div class="legend">
            <div class="legendItem">
                <div class="leftColor" style="background-color: #27CDFD;"></div>
                <div class="rightLabel">
                    填报中
                </div>
            </div>
            <div class="legendItem">
                <div class="leftColor" style="background-color: #FBA02C;"></div>
                <div class="rightLabel">
                    审核中
                </div>
            </div>
            <div class="legendItem">
                <div class="leftColor" style="background-color: #00FF6C;"></div>
                <div class="rightLabel">
                    已完成
                </div>
            </div>
            <div class="legendItem">
                <div class="leftColor" style="background-color: #64FDDD;"></div>
                <div class="rightLabel">
                    数据收集量
                </div>
            </div>
        </div>
    </div>
    <div class="c-search">
        <div class="serachContent">
            <input class="serachInput" type="text">
            <div class="serachIcon">
                <i class="layui-icon layui-icon-search"></i>
            </div>
        </div>
        <ul class="listContent list-hide">
            <li>2018年气温数据收集</li>
            <li>2018年6月气温数据收集</li>
        </ul>
    </div>
    <div class="mask" style="display: none;"></div>
</div>
<script>
layui.use(['admin', 'echarts'], function(){
    var $ = layui.$,
    admin = layui.admin,
    echarts = layui.echarts,
    router = layui.router(),
    laytpl = layui.laytpl,
    isIEEight = false;

    var DEFAULT_VERSION = 8.0;  
    var ua = navigator.userAgent.toLowerCase();  
    var isIE = ua.indexOf("msie")>-1;  
    var safariVersion;  
    if(isIE){  
        safariVersion =  ua.match(/msie ([\d.]+)/)[1];  
    }  
    if(safariVersion <= DEFAULT_VERSION ){ 
        isIEEight = true;
    /*  alert('系统检测到您正在使用ie8以下内核的浏览器，不能实现完美体验，请更换或升级浏览器访问！'); */
    };

    //搜索
    $('.index-map-content').on('click', '.serachIcon', function() {
        var $ul = $('.index-map-content').find('.listContent');
        var ulShow = $ul.hasClass('list-show');
        if(!ulShow) {
            $('.mask').show();
            $ul.removeClass('list-hide');
            $ul.addClass('list-show');
        }
    });

    $('.listContent').on('click', 'li', function() {
        var $ul = $('.index-map-content').find('.listContent');
        var selectText = $(this).text();
        $('.index-map-content').find('.serachInput').val(selectText);
        $ul.removeClass('list-show');
        $ul.addClass('list-hide');
        $('.mask').hide();
    });

    $('.mask').on('click', function() {
        var $ul = $('.index-map-content').find('.listContent');
        $(this).hide();
        $ul.removeClass('list-show');
        $ul.addClass('list-hide');
    })

    var uploadedDataURL = "./mapData/baiduchina.json";
    var bg = '<div class="bg-tooltip"></div>';
    var geoCoordMap = [
        {name: '北京',value: 72, cords: [116.41433, 39.91095], status: 'fill'},
        {name: '四川',value: 45, cords: [103.9526, 30.7617], status: 'audit'},
        {name: '浙江',value: 2, cords: [119.5313, 29.8773], status: 'finish'}
    ];

    function dealCoordMap(arr) {
        var mapNumber = {
            'finish': 100,
            'audit': 50,
            'fill': 10
        },
        result = [];
        $.each(arr, function(index, item) {
            item.statusNumber = mapNumber[item.status];
            result.push(item);
        })
        return result;
    };

    var areaData = dealCoordMap(geoCoordMap);

    function getShadowOption() {
        var shadowOption = {
            geo: {
                map: 'gd',
                roam:'false',
                silent: true,
                label: { //图形上的文本标签
                    normal: {
                        show: false
                    }
                },
                top: '15%',
                left: '10%',
                aspectScale: 0.75, //scale地图的长宽比
                itemStyle: {
                    normal: {
                        borderWidth: 0.5,
                        color: '#0E2D56',
                        opacity: 0.8,
                    }
                },
                z: 1
            },
            zlevel: 1,
            series: []
        };
        return shadowOption;
    }
    
    function getBarOption(chart, data) {
        var op = chart.getOption();
        var grids = [];
        var xAxis = [];
        var yAxis = [];
        var barSeries = [];
        $.each(data, function(index, area) {
            xAxis.push({
                gridIndex: index,
                show: false,
                type: "category",
                data: ['数量'],
                z: 100
            });

            yAxis.push({
                type: "value",
                show: false,
                gridIndex: index,
                z: 100
            });
            var coord = chart.convertToPixel("geo", area.cords);
            grids.push({
                width: 10,
                height: 30,
                left: coord[0],
                top: coord[1]-30,
                z: 100
            });
            barSeries.push({
                id: index,
                type: "bar",
                xAxisIndex: index,
                yAxisIndex: index,
                barCategoryGap: 0,
                data: [{
                    value: area.statusNumber,
                    lable: {
                        show: true
                    }
                }],
                z: 100,
                zlevel: 2,
                itemStyle: {
                    normal:{ 
                        color: '#60E2BC',
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 16
                            }
                        }
                    }
                }
            });
        });

        return {
            geo: op.geo,
            grid: grids,
            xAxis: xAxis,
            yAxis: yAxis,
            series: barSeries
        };
    }

    function getBarMapOption() {
        var barMapOption = {
            geo: {
                map: 'gd',
                roam:'false',
                silent: true,
                label: { //图形上的文本标签
                    normal: {
                        show: false
                    }
                },
                top: '13%',
                left: '12%',
                aspectScale: 0.75, //scale地图的长宽比
                z: 1,
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: 'transparent',
                        opacity: 0,
                    }
                },
            },
            zlevel: 3,
            series: []
        };
        return barMapOption;
    };

    $.get(uploadedDataURL, function(as) {
        
        echarts.registerMap('gd', as); //利用json引入示例


        var shadowChart = echarts.init(document.getElementById('i-china-shadow'));
        var shadowOption = getShadowOption();
        shadowChart.setOption(shadowOption);

        var myChart = echarts.init(document.getElementById('i-china-map'));
        var option = {
            tooltip: { //提示框的内容
                formatter: function() {
                },
                enterable: true,
                padding: 0,
                zlevel: 500,
                transitionDuration: 1,
                textStyle: {
                    color: '#000',
                    decoration: 'none',
                },

            },
            visualMap: {
                min: 0,
                max: 100,
                calculable: false,
                inRange: {
                    color: ['#1402fd', '#FFFD64', '#c70102']
                },
                itemWidth: 0
            },
            geo: {
                map: 'gd',
                roam:'false',
                silent: true,
                label: { //图形上的文本标签
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                    }
                    
                },
                top: '13%',
                left: '12%',
                aspectScale: 0.75, //scale地图的长宽比
                z: 2
            },
            series: [
                {
                    type: 'map',
                    mapType: 'gd',
                    map: 'gd', //地图的类型
                    symbolSize: 1,
                    label: { //图形上的文本标签
                        normal: {
                            show: true
                        }
                    },
                    silent: true,
                    top: '13%',
                    left: '12%',
                    data: areaData,
                    mapType: "gd",
                    aspectScale: 0.75, //scale地图的长宽比 
                    roam: false, //是否开启鼠标缩放和平移漫游
                    itemStyle: { //地图区域的多边形  图形样式
                        normal: {
                            borderColor: '#B2C6E4',
                            borderWidth: 0.8,
                            areaColor: '#185AB1',
                            opacity: 1,
                            label:{show:true}
                        },
                        emphasis:{label:{show:true}}
                    },
                    nameMap: {
                        '北京': '北京',
                        '四川': '四川',
                        '浙江': '浙江',
                        '广西': '广西'
                    },
                    zlevel: 2
                }
            ]
        };
        myChart.setOption(option);

        var BarChart = echarts.init(document.getElementById('i-china-bar'));
        var BarMapOption = getBarMapOption();
        BarChart.setOption(BarMapOption);
        var barOption = getBarOption(BarChart, areaData);
        BarChart.setOption(barOption);
        
        if(isIEEight) {
            $('#i-china-map').children("div").eq(0).css('position','absolute');
            $('#i-china-shadow').children("div").eq(0).css('position','absolute');
        }
       
    });
});
</script>